<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div> -->

  <div style="width: 100px;height: 100px; left: 0; position: absolute; top: 0; background-color: red;"></div>












  <script>
    // 事件
    // 事件绑定： 1.ele.onXXX = function() {}  兼容性好，但是一个元素的用一个事件上只能有一个
    // 基本等同于写在html 行间样式中  程序this指向dom自己
    // 2.obj.addEventListener(type,fn,false)   一个事件可以绑定多个处理函数 
    // obj.addEventListener('click',function(){    程序this指向调用者dom自己
    //   console.log('a');
    // },false)



    // 绑定事件出现在循环里面，考虑是否会形成闭包，用立即执行函数解决或者let
    // var liCol = document.getElementsByTagName('li')
    // var len = liCol.length

    // for (var i = 0; i < len; i++) {
    //   (function (i) {
    //     liCol[i].addEventListener('click', function () {
    //       console.log(i);
    //     }, false)
    //   }(i))
    // }



    // // 封装兼容性高的事件处理函数
    // function addEvent(elem, type, handle) {
    //   if (elem.addEventListener) {
    //     elem.addEventListener(type, handle, false)
    //   } else if (elem.attachEvent) {
    //     elem.attachEvent('on' + type, function () {
    //       handle.call(elem)
    //     })
    //   } else {
    //     elem['on' + type] = handle
    //   }
    // }


    // var div = document.getElementsByTagName('div')[0]
    // div.onclick = function() {
    //   console.log('a');
    // }

    // div.addEventListener('click',function() {
    //   console.log('a');
    // },false)

    // 其中function为匿名函数，这里建议改成，函数名，在外面定义函数引用,方便清除
    // di.addEventListener('click',test,false);
    // function test(){
    //   console.log('a');
    // }

    // 解除绑定事件 
    // div.onclick = null   

    // 解除绑定事件，事件，类型，对象也都要一样
    // div.removeEventListener('click',test,false)

    // 事件冒泡
    // 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能
    // 即同一事件，自子元素冒泡向父元素

    // 事件捕获
    // 结构上（非视觉上）嵌套关系的元素，会存在捕获功能，
    // 自父元素捕获至子元素

    // 触发顺序  先捕获，后冒泡
    // focus blur change submit reset select 等事件不冒泡


    // 事件对象 ： 每个事件处理函数里面，都有一个形参，会传入一个事件对象
    // 记载了事件发生时的一系列信息

    // 阻止冒泡事件  e.stopPropagation();  e.cabcekBubble = true

    // 封装函数 取消事件冒泡函数
    // function stopBubble() {
    //   if(event.stopPropagation){
    //     event.stopPropagation
    //   }else{
    //     event.cancelBubble = true
    //   }
    // }

    // 阻止默认事件
    // return false    e.preventDefault()    e.returnValue = false

    // 封装阻止默认事件函数
    // function cancelHandler(event){
    //   if(event.preventDefault){
    //     event.preventDefault()
    //   }else{
    //     event.returnValue = false
    //   }
    // }


    // 事件委托  利用事件冒泡，和事件源对象进行处理
    // var ul = document.getElementsByTagName('ul')[0]
    // ul.onclick = function(e) {
    //   var event = e || window.event
    //   var target = e.target || event.srcElement
    //   console.log(target.innerText);
    // }



    // 拖拽
    // var div = document.getElementsByTagName('div')[0]
    // var disX, disY;
    // div.onmousedown = function (e) {
    //   disX = e.pageX - parseInt(div.style.left)
    //   disY = e.pageY - parseInt(div.style.top)
    //   div.onmousemove = function (e) {
    //     var event = e || window.event
    //     console.log(e.pageX + " " + e.pageY);
    //     div.style.left = e.pageX - disX + "px"
    //     div.style.top = e.pageY - disY + "px"
    //   }
    //   div.onmouseup = function () {
    //     div.ontouchmove = null
    //   }
    // }

    // 拖拽封装函数
    // function drag(elem) {

    // }


    // click事件只能监听左键
    // onmousedown 和 onmouseup来判断鼠标按键
    // onclick = onkeydown + onkeyup

    // document.onmousedown = function (e) {
    //   if (e.button == 0) {
    //     console.log('点击了左键');
    //   } else if (e.button == 2) {
    //     console.log('点击了右键');
    //   }
    // }

    // 点击和拖拽分别
    // var firstTime = 0
    // var lastTime = 0
    // var key = false
    // document.onmousedown = function () {
    //   firstTime = new Date().getTime()
    // }

    // document.onmouseup = function () {
    //   lastTime = new Date().getTime()
    //   if (lastTime - firstTime < 300) {
    //     key = true
    //   }
    // }


    // document.onclick = function () {
    //   if (key) {
    //     console.log('click');
    //     key = false
    //   }
    // }


    // 键盘事件
    // keydown keyup keypress
    // keydown > keypress > keyup




    // keydown和keypressd 的区别
    // keydown可以响应任意键盘按键， keypress只可以响应字符类键盘按键
    // keypress返回ASCII码， 可以转换为相应字符



    // document.onkeypress = function (e) {
    //   console.log(String.fromCharCode(e.charCode));
    // }





    // 文本操作事件
    // window.onload   速度最慢 先dom树挂载节点，当全部页面加载完成后才执行




  </script>

</body>

</html>